<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        // 简洁 更加的严格 保证每个人写出来的代码基本上是一样
        var lis = document.querySelectorAll('ul li');
        // for(var i=0;i<lis.length;i++){
        //     // lis[i].index = i;
        //     lis[i].onclick = (function(i){
        //         return function(){
        //             alert(i);
        //         }
        //     })(i);
        // }
        for(let i=0;i<lis.length;i++){
            lis[i].onclick = function(){
                alert(i);
            }
        }

        // let 
        // 1. 产生块级作用域
        // 2. 不会出现变量提升
        // 3. 产生暂时性死区
        // 4. 不能重复声明
    </script>
</body>
</html>